<template>
  <div class="app-container">
    <div class="stage-box" style="padding-left: 50px">
      <div class="stage-title">生产</div>
      <div class="flex-box station-list" style="flex-wrap: wrap">
        <div class="fx-item flex-box" v-for="(item,index) in snList2" :key="item+index">
          <div class="fx-item-left">
            <div>{{ item.workstationName }}</div>
            <div>{{ item.userName }}</div>
          </div>
          <div class="fx-item-right">
            <div class="fx-item-remark">上料防错：{{ item.startReporting }} </div>
            <el-table :data="item.itemList?item.itemList: []" height="250" border style="width: 100%">
              <el-table-column prop="itemCode" label="物料编码">
              </el-table-column>
              <el-table-column prop="itemName" label="物料名称">
              </el-table-column>
              <el-table-column prop="specification" label="规格型号">
              </el-table-column>
              <el-table-column prop="snCodeItem" label="序列号"> </el-table-column>
            </el-table>
            <div class="fx-item-remark">工位检验：{{ item.finishReporting }} </div>
            <div class="fx-item-remark">报工：{{ item.checkTime }} </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "compreTrace",
  data() {
    return {
      snList2: [
          {
            workstationName: "电桩三线总装一",
            userName: "黄正当",
            startReporting: "2024-08-09 10:22:20",
            finishReporting: "2024-08-09 14:04:23",
            checkTime: "2024-08-09 10:27:52",
            actualTime: "03时42分03秒",
            itemList: [
              {
                createBy: null,
                createTime: null,
                updateBy: null,
                updateTime: null,
                remark: null,
                proFeedPreventIdList: null,
                feedId: null,
                workorderId: null,
                workorderCode: "MO005817",
                workorderName: null,
                processId: null,
                processName: null,
                processCode: null,
                productId: null,
                productCode: null,
                productName: null,
                snCode: "80240810039",
                startReporting: "2024-08-09T10:22:20.000+08:00",
                finishReporting: "2024-08-09T14:04:23.000+08:00",
                itemList: null,
                status: null,
                oldSnCode: null,
                workstationCode: null,
                workstationName: "电桩三线总装一",
                lineId: null,
                lineName: null,
                workshopCode: null,
                workshopName: null,
                workshopId: null,
                productSpc: null,
                userName: "黄正当",
                workstationId: null,
                material: null,
                downtime: null,
                reportTime: null,
                actualTime: "03时42分03秒",
                checkTime: "2024-08-09 10:27:52",
                itemCode: "1206101244",
                itemName: "直流充电桩（机）铭牌",
                specification: "HIE-Z200801-MP01-03",
                snCodeItem: "ZLCD2024080768672",
                skip: null,
              },
            ],
          },
        ],
        formData: {
          snList: [
          {
            workstationName: "电桩三线总装一",
            userName: "黄正当",
            startReporting: "2024-08-09 10:22:20",
            finishReporting: "2024-08-09 14:04:23",
            checkTime: "2024-08-09 10:27:52",
            actualTime: "03时42分03秒",
            itemList: [
              {
                createBy: null,
                createTime: null,
                updateBy: null,
                updateTime: null,
                remark: null,
                proFeedPreventIdList: null,
                feedId: null,
                workorderId: null,
                workorderCode: "MO005817",
                workorderName: null,
                processId: null,
                processName: null,
                processCode: null,
                productId: null,
                productCode: null,
                productName: null,
                snCode: "80240810039",
                startReporting: "2024-08-09T10:22:20.000+08:00",
                finishReporting: "2024-08-09T14:04:23.000+08:00",
                itemList: null,
                status: null,
                oldSnCode: null,
                workstationCode: null,
                workstationName: "电桩三线总装一",
                lineId: null,
                lineName: null,
                workshopCode: null,
                workshopName: null,
                workshopId: null,
                productSpc: null,
                userName: "黄正当",
                workstationId: null,
                material: null,
                downtime: null,
                reportTime: null,
                actualTime: "03时42分03秒",
                checkTime: "2024-08-09 10:27:52",
                itemCode: "1206101244",
                itemName: "直流充电桩（机）铭牌",
                specification: "HIE-Z200801-MP01-03",
                snCodeItem: "ZLCD2024080768672",
                skip: null,
              },
            ],
          },
        ],
        }
    };
  },
  created() {},
  mounted() {
    this.init(this.formData);
  },
  methods: {
    init(formData) {
      this.snList2 = formData.snList ? formData.snList : []
    },
  },
};
</script>
<style lang="scss" scoped>
.app-container {
  // padding: 12px 34px;
  font-size: 14px;
}
.title {
  font-size: 20px;
  background: #4ec4c5;
  padding: 10px;
  color: #fff;
}
.station-list {
  flex-wrap: wrap;
  .fx-item {
    flex: 0 0 50%;
    .fx-item-left {
      width: 60px;
      text-align: center;
    }
    .fx-item-right {
      flex: 1;
      .fx-item-remark {
        margin-bottom: 6px;
        padding: 10px;
        background: #00b3ee;
        color: #fff;
        font-size: 14px;
        border-radius: 5px;
      }
    }
  }
}
.stage-box {
  ::v-deep {
    .el-card__body {
      padding: 8px;
    }
  }
  .sn-flow-box {
    padding: 12px;
    margin-left: 20px;
  }
  border-left: 1px dotted #ccc;
  padding: 16px;
  border-bottom: 1px dotted #ccc;
  position: relative;
  .stage-title {
    position: absolute;
    padding: 4px;
    background: #fff;
    left: -16px;
    top: 50%;
  }
  .sn-box {
    width: 100px;

    height: 50px;
    text-align: center;
    line-height: 20px;
    background-color: #e7faf0;
    color: #13ce66;
    padding-top: 4px;
  }
  .sn-box-arrow {
    width: 0;
    height: 0;
    border-bottom: 25px solid transparent;
    border-top: 25px solid transparent;
    border-left: 25px solid #e7faf0;
  }
}
.box-card {
  width: 25%;
}
.arrows-bottom {
  width: 100%;
  margin-top: 14px;
  .arrows-line {
    width: 6px;
    height: 24px;
    background: #2ecc71;
    margin: 0 auto;
  }
  .arrows {
    width: 0;
    height: 0;
    border-right: 6px solid transparent;
    border-left: 6px solid transparent;
    border-top: 6px solid #2ecc71;
    margin: 0 auto;
  }
}
.collect-box {
  width: 100%;
  background-color: #ffe9d0;
  padding: 8px 16px;
  border-radius: 5px;
  text-align: center;
  font-size: 15px;
}
.flex-box {
  display: flex;
}
.center-box {
  text-align: center;
}
.max-box {
  width: max-content;
}
</style>
